.viewname {
    position: relative;
    height: 435.2rpx;
    width: 100%;
    background: #eeeee8;
    overflow: hidden;
    // overflow: visible;
    justify-content: center;
    align-items: center;

    .uio {
        width: 100%;
        height: 100%;
        --bg-color: hsl(211deg 40% 15%);
        filter: brightness(60%) contrast(70%) saturate(80%);
        background-color: var(--bg-color);
        background-image: linear-gradient(89deg, rgba(26, 28, 39, 0) calc(50% - 948rpx), var(--bg-color) calc(100% - 1344rpx), rgba(32, 32, 53, .35) 74.08%, rgba(33, 33, 57, .2) 99.53%);
    }

    .images {
        width: 100%;
        height: 100%;
    }
}

.scre {
    display: flex;
}

.overs {
    display: flex;
    margin-top: 100rpx;
    height: 46rpx;
    position: absolute;
    width: 100%;
    max-width: 760rpx;
    flex-direction: row;

    .lef {
        display: flex;
        width: 30rpx;
        height: 46rpx;
        margin-left: 90rpx;
    }

    .mif {
        margin-left: 400rpx;
        height: 46rpx;
        width: 33rpx;
        display: flex;
    }

    .rif {
        display: flex;
        margin-left: 60rpx;
        width: 100rpx;
        height: 30rpx;
    }
}

.hus {
    position: absolute;
    display: flex;
    flex-direction: row;
    margin-top: 180rpx;
    height: 134rpx;
    width: 100%;

    .ima {
        display: flex;
        margin-left: 64rpx;
        width: 134rpx;
        height: 134rpx;
        border: 2rpx solid #c0bfbf;
        border-radius: 50%;
    }

    .names {
        display: flex;
        margin-left: 20rpx;
        width: 500rpx;
        max-width: 500rpx;
        flex-direction: column;

        .topx,
        .centerx,
        .bottonx {
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
        }

        .topx {
            width: 214rpx;
            height: 52rpx;
            font-size: 32rpx;
            color: #000000;
            line-height: 38rpx;
            text-align: left;
        }

        .centerx {
            display: flex;
            width: 252rpx;
            height: 52rpx;
            font-size: 28rpx;
            color: #949090;
            line-height: 32rpx;
            text-align: CENTER;
        }

        .bottonx {
            display: flex;
            max-width: 400rpx;
            height: 34rpx;
            font-size: 26rpx;
            color: #000000;
            line-height: 30rpx;
            text-align: CENTER;
        }
    }
}

.dotai {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 382rpx;
    height: 52rpx;
    margin-left: 72rpx;
    bottom: 44rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-500;
    font-weight: 500;
    text-align: CENTER;
    color: #949090;
    line-height: 32rpx;
}

.guanz {
    display: flex;
    position: sticky;
    top: 0;
    width: 750rpx;
    height: 140rpx;
    background: #fffaec;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .guanz1,
    .guanz2 {
        display: flex;
        flex-direction: column;
        width: 112rpx;
        height: 82rpx;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #000000;
        line-height: 38rpx;
    }

    .guanz1 {
        margin-right: 116rpx;
    }
}

.divs {
    display: flex;
    flex-direction: column;
    //1004
    // height: 1000rpx;

    height: 100%;
    width: 100%;

    .dis-box {
        margin: 0 64rpx;
        display: flex;
        flex-direction: column;
        height: 100%;

        .it-box,
        .year-box {
            display: flex;
            width: 200rpx;
            height: 48rpx;
            max-width: 300rpx;
            max-height: 50rpx;
            justify-content: center;
            align-items: center;
        }

        .it-box {
            font-size: 40rpx;
            font-family: Inter, Inter-700;
            font-weight: 700;
            text-align: CENTER;
            color: #f2bb16;
            line-height: 46rpx;
        }

        .yearover {
            display: flex;
            flex-direction: column;
        }

        .year-box {
            margin-top: 28rpx;
            font-size: 40rpx;
            font-family: Inter, Inter-500;
            font-weight: 500;
            text-align: CENTER;
            color: #000000;
            line-height: 46rpx;
        }

        .tall-box {
            display: flex;
            flex-direction: column;
            width: 628rpx;
            height: 404rpx;
            margin-top: 30rpx;
            background: #f0f0f0;
            border-radius: 20rpx;
            box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

            .new-year,
            .tag,
            .tag1,
            .tag2,
            .ims,
            .ims2,
            .fen,
            .ove,
            .ove1,
            .ove2,
            .ove3,
            .ove4 {
                display: flex;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
            }

            .new-year {
                margin-top: 22rpx;
                margin-left: 58rpx;
                width: 142rpx;
                height: 38rpx;
                font-size: 28rpx;
                text-align: CENTER;
                color: #000000;
                line-height: 32rpx;
            }

            .tag {
                flex-direction: row;
                margin-left: 58rpx;
                margin-top: 20rpx;
                width: 384rpx;
                height: 38rpx;

                .tag1 {
                    width: 180rpx;
                    height: 38rpx;
                    font-size: 24rpx;
                    text-align: center;
                    color: #f2bb16;
                    line-height: 28rpx;
                    text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

                }

                .tag2 {
                    width: 204rpx;
                    height: 38rpx;
                    font-size: 24rpx;
                    text-align: center;
                    color: #000000;
                    line-height: 28rpx;
                    text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
                }

            }

            .ims {
                margin: 10rpx 66rpx;
                height: 120rpx;

                .ims2 {
                    width: 132rpx;
                    height: 120rpx;
                    margin-right: 51rpx;
                    background: #ffffff;
                    border-radius: 20rpx;
                    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25), 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
                }

                &last-child {
                    margin-right: 0rpx;
                }


            }

            .fen {
                width: 180rpx;
                height: 36rpx;
                margin-top: 20rpx;
                margin-left: 66rpx;
                background: #d9d9d9;
                border-radius: 30rpx;
                box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }

            .ove {
                margin-left: 58rpx;
                margin-top: 18rpx;
                flex-direction: row;
                width: 528rpx;
                height: 48rpx;

                .ove1 {
                    width: 430rpx;
                    height: 48rpx;

                    .ove2 {
                        width: 110rpx;
                        height: 48rpx;

                        &:last-child {
                            margin-right: 0;
                        }
                    }

                    .ove3 {
                        width: 48rpx;
                        height: 48rpx;
                    }

                    .ove4 {
                        width: 60rpx;
                        height: 48rpx;
                        justify-content: center;
                        align-items: center;
                        font-size: 24rpx;
                        text-align: CENTER;
                        color: #545050;
                        line-height: 28rpx;
                        text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

                    }

                }

                .over {
                    width: 148rpx;
                    height: 48rpx;
                    justify-content: center;
                    /* 水平居中 */
                    align-items: center;

                    /* 垂直居中 */
                    .over1 {
                        width: 40rpx;
                        height: 48rpx;
                        margin-left: 30rpx;
                    }
                }
            }
        }

    }
}

.bottom-box {
    position: fixed;
    display: flex;
    width: 750rpx;
    height: 166rpx;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0rpx -6rpx 7.8rpx 0rpx rgba(0, 0, 0, 0.25);

    .b1,
    .b2 {
        justify-content: center;
        align-items: center;
        display: flex;

        border-radius: 20rpx;
        background: #ffffff;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #ffffff;
        line-height: 32rpx;
    }

    .b1 {
        margin-top: 55rpx;
        background: #f2bb16;
        width: 194rpx;
        height: 56rpx;
        border-radius: 20rpx;
    }

    .b2 {
        margin-top: 55rpx;
        margin-left: 30rpx;
        background: #f2bb16;
        width: 194rpx;
        height: 56rpx;
    }

    .sacs {
        position: absolute;
        display: flex;
        bottom: 0;
        height: 50rpx;
        width: 100%;
    }
}

// bottomModal.scss
.geng {
    display: flex;
    width: 750rpx;
    height: 282rpx;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    flex-direction: column;

    .tops-box {
        display: flex;
        height: 84rpx;
        justify-content: center;
        align-items: center;
        font-size: 40rpx;
        font-family: Inter, Inter-700;
        font-weight: 700;
        text-align: center;
        color: #000000;
        line-height: 38rpx;
    }

    .mids-box {
        display: flex;
        height: 130rpx;
        flex-direction: row;

        .lefs-box {
            display: flex;
            height: 100rpx;
            width: 70rpx;
            margin-top: 20rpx;
            margin-left: 140rpx;
            flex-direction: column;

            .lefs-img {
                display: flex;
                margin-top: 10rpx;
                height: 60rpx;
                width: 60rpx;
            }

            .lefs-title {
                font-size: 24rpx;
                font-family: Inter, Inter-500;
                font-weight: 500;
                text-align: center;
                color: #000000;
                line-height: 28rpx;
            }

        }

        .mods-box {
            display: flex;
            height: 100rpx;
            width: 130rpx;
            margin-top: 20rpx;
            margin-left: 120rpx;
            flex-direction: column;

            .mods-img {
                display: flex;
                margin-top: 10rpx;
                height: 60rpx;
                width: 60rpx;
                margin-left: 30rpx;
            }

            .mods-title {
                font-size: 24rpx;
                font-family: Inter, Inter-500;
                font-weight: 500;
                text-align: LEFT;
                color: #000000;
                line-height: 28rpx;
            }
        }

        .regs-box {
            display: flex;
            height: 100rpx;
            width: 70rpx;
            background: #0ba4d7;
            margin-top: 20rpx;
            margin-left: 120rpx;

            .regs-img {
                display: flex;
                margin-top: 10rpx;
                height: 60rpx;
                width: 60rpx;
            }

            .regs-title {
                font-size: 24rpx;
                font-family: Inter, Inter-500;
                font-weight: 500;
                text-align: LEFT;
                color: #000000;
                line-height: 28rpx;
            }
        }
    }

    .bots-box {
        display: flex;
        background: #ffffff;
        height: 70rpx;
        width: 100%;
    }

}